<template>
  <div id="total">
    <div id="top">
      <div id="left">
        <div>
          <el-form-item id="zhidan" prop="drug" label="药品名称:">
            <el-input v-model="searchData.drug" placeholder="请输入药品名称" />
          </el-form-item>
        </div>
        <div id="require">
          <el-button type="primary" @click="queryFn()">查询</el-button>
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div id="bottom">
      <div id="form">
        <el-table
          :data="getBatchInventoryData"
          style="width: 100%"
          size="large"
        >
          <el-table-column type="index" width="50" />
          <el-table-column
            align="center"
            prop="billId"
            label="采购编号"
            width="220"
          />
          <el-table-column
            align="center"
            prop="drugName"
            label="药品名称"
            width="140"
          />
          <el-table-column
            align="center"
            prop="drugSort"
            label="药品分类"
            width="120"
          />
          <el-table-column
            align="center"
            prop="drugFactory"
            label="生产厂家"
            width="140"
          />
          <el-table-column
            align="center"
            prop="drugSpecification"
            label="规格"
            width="120"
          />
          <el-table-column
            align="center"
            prop="drugNumber"
            label="库存"
            width="120"
          />
          <el-table-column
            align="center"
            prop="trade"
            label="批发价"
            width="200"
          >
            <template #default="scope">
              {{ scope.row.trade }}元
            </template> </el-table-column
          >>
          <el-table-column
            align="center"
            prop="prescription"
            label="处方价"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.prescription }}元
            </template> </el-table-column
          >>
          <el-table-column
            align="center"
            prop="trades"
            label="批发额"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.trades }}元
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="trades"
            label="批发额"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.trades }}元
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div id="pager-wapper">
        <el-pagination
          :page-sizes="[2, 3, 5, 10]"
          id="paging"
          background
          layout="prev, pager, next"
          v-model:page-size="pageSize"
          :total="store.state.stock.batchInventoryTotal"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineComponent, computed, onBeforeMount } from "vue";
import { mapGetters, mapMutations, useStore } from "vuex";
const store = useStore();
// 默认展示数据
const setBatchInventoryData = mapMutations([
  "setBatchInventoryData",
]).setBatchInventoryData.bind({
  $store: store,
});
// 展示默认数据
const getBatchInventoryData = computed(
  mapGetters(["getBatchInventoryData"]).getBatchInventoryData.bind({
    $store: store,
  })
);
// 分页
// 默认每页展示5项
const pageSize = ref(5);
const status = ref(1);
const drugName = ref();
onBeforeMount(() => {
  setBatchInventoryData({
    currentPage: 0,
    pageSize: pageSize.value,
    status: status.value,
    drugName: drugName.value,
  });
});
// 分页功能实现
const pageChange = (currentPage: any) => {
  setBatchInventoryData({
    currentPage: currentPage,
    pageSize: pageSize.value,
    status: status.value,
  });
};

// 添加药品弹框内的药品名称输入框
const searchData = reactive({
  drug: "",
});
// 根据药品名称查询药品信息
const queryFn = () => {
  // console.log(11111);
  // console.log(searchData.drug);
  setBatchInventoryData({
    currentPage: 0,
    pageSize: pageSize.value,
    status: status.value,
    drugName: searchData.drug,
  });
};
</script>
<style scoped>
#top {
  display: flex;
  justify-content: space-between;
}
#left {
  display: flex;
  align-items: center;
   ;
  height: 50px;
}
#left > div {
  margin-left: 20px;
}

#red {
  color: red;
}

#bottom {
  margin-top: 20px;
   ;
}
#pager-wapper > .el-pagination {
  margin-top: 20px;
   
  justify-content: center;
  align-items: center;
}
#zhidan {
  display: flex;
  margin-top: 20px;
   ;
}
#require {
  display: flex;
}

.el-form-item > div {
  display: flex;
}
</style>
